// 这个配置文件，起始就是一个js文件，通过Node中的模块操作，向外暴露了一个配置对象
var path = require('path');
var VueLoaderPlugin= require('vue-loader/lib/plugin');
// 不加VueLoaderPlugin，vue打包会报错

module.exports={
    entry:{
        entry:path.join(__dirname,'./src/index.js')//入口文件
    },
    output:{
        path:path.join(__dirname,'/dist'),
        filename:'main.js'    
    },
    plugins: [
        // 不加这个vue打包会报错make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ],
    module:{//这个节点，用于配置所有的第三方模块加载器
        rules:[//所有第三方模块的匹配规则
            { test:/\.css$/, use:['style-loader','css-loader'] },
            //配置处理.css文件第三方loader规则
            { test:/\.less$/, use:['style-loader','css-loader','less-loader'] },
            //配置处理.less文件的第三方loader规则
            { test:/\.(jpg|png|gif|bmp|jpeg)$/, 
              loader:'url-loader',
              options:{
                limit:6000,  
                publicPath:'/',
                name:'[hash:8].[name].[ext]'
               }
            },
            //?limit=5000&name=[hash:8].[name].[ext]
            //处理图片路径的loader
            //limit给的值是图片的大小，单位是byte，如果给定的图片大小大于等于limit值，则
            // 不会被转为base64格式的字符串，反之则会

            { test:/\.(ttf|eot|svg|woff|woff2)$/, use:'url-loader'},    
            //处理字体文件的loader
            //bootstrap4 下下来没有font？

            // 怎么快速又准确的理解 publicPath，我觉得可以用下面的这个公式来表述：
            // 静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径
            { test:/\.js$/, use:'babel-loader',exclude:/node_modules/},
            
            { test :/\.vue$/,use:'vue-loader'}
            // Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
        ]
    }
}